<template>
    <el-menu
            background-color=""
            text-color=""
            active-text-color=""
            style="height: 100vh"
            default-active=""
            :collapse="isCollapse"
            :collapse-transition="false"
            router
    >

        <el-menu-item index="/Home" >
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
        </el-menu-item>

        <el-menu-item :index="item.menuClickPath" v-for="(item,i) in menus" :key="i">
            <i :class="item.menuIcon"></i>
            <span slot="title">{{item.menuName}}</span>
        </el-menu-item>

    </el-menu>
</template>

<script>
    export default {
        name: "Aside",
        data(){
            return{
               /* menus:[
                   {
                        menuClickPath: '/UserManger',
                        menuName: '用户管理',
                        menuIcon: 'el-icon-user-solid'
                    }, {
                        menuClickPath: '/AdminManger',
                        menuName: '管理员管理',
                        menuIcon: 'el-icon-s-custom'
                    }
                ]*/

            }
        },
        props:{//isCollapse: false
            isCollapse:Boolean
        },
        computed:{
            "menus": {
                get(){
                    return this.$store.state.menus
                }
            }
        }

    }
</script>

<style scoped>

</style>